<template>
  <div class="login-container">
    <div class="login-content">
      <div class="login-title">数字化产品运营管理系统</div>
      <div class="login-form">
        <el-form :model="ruleForm" :rules="rules2" ref="ruleForm" label-width="100px" class="ruleForm">
          <el-form-item label="手机号" required prop="phone">
            <el-input
              type="text"
              placeholder="请输入手机号"
              v-model="ruleForm.phone"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码" required prop="randomCode">
            <el-input v-model.number="ruleForm.randomCode" placeholder="验证码">
              <template slot="append">
                <el-button @click="send" type="text" style="width: 100px">
                  <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span>
                  <span v-if="!sendMsgDisabled">获取验证码</span>
                </el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="密码" required prop="pass">
            <el-input type="password" placeholder="密码" v-model="ruleForm.pass" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" required prop="checkPass">
            <el-input type="password" placeholder="确认密码" v-model="ruleForm.checkPass" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="submitForm('ruleForm')">注册</el-button>
          </el-form-item>
        </el-form>
        <div class="extral-link">
          <el-button type="text" @click="toUrl(login)">立即登录</el-button>
          <el-button type="text" @click="toUrl(enterpriseSignUp)">企业注册</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import md5 from 'utils/md5'
  export default {
    name: "index",
    data() {
      var checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        }
        return callback();
      };
      var checkRandomCode = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('验证码不能为空'));
        }
        return callback();
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('请输入密码'));
        } else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/.test(value)) {
          return callback(new Error('密码长度6-12位数字+字母组合'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          return callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          return callback(new Error('两次输入密码不一致!'));
        } else {
          return callback();
        }
      };
      return ({
        ruleForm: {
          pass: '',
          checkPass: '',
          phone: '',
          randomCode: '',
        },
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' },
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          phone: [
            { validator: checkPhone, trigger: 'blur' },
            { pattern: /^[0-9]{11}$/, len: 11, trigger: 'blur', message: "请输入11位手机号码" },
          ],
          randomCode: [
            { validator: checkRandomCode, trigger: 'blur' }
          ]
        },
        login: '/login',
        enterpriseSignUp: '/enterpriseSignUp',
        time: 60, // 发送验证码倒计时
        sendMsgDisabled: false
      })
    },
    methods: {
      submitForm(formName) {
        console.log(formName)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http.post(this.GLOBAL.host, {
              method: "User_SetPwd",
              data: {
                phone: this.ruleForm.phone,
                randomCode: this.ruleForm.randomCode,
                password: md5(this.ruleForm.pass),
              }
            }).then(res => {
              if (res.data.code === 200) {
                this.$message({
                  message: '注册成功',
                  type: 'success'
                });
                this.$router.push({path: '/login'});
              } else {
                this.$message({
                  message: res.data.data,
                  type: 'error'
                });
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      toUrl(url){
        this.$router.push({path: url});
      },
      send() {
        let me = this;
        if (me.sendMsgDisabled) {
          return
        }
        me.sendMsgDisabled = true;
        let interval = window.setInterval(function() {
          if ((me.time--) <= 0) {
            me.time = 60;
            me.sendMsgDisabled = false;
            window.clearInterval(interval);
          }
        }, 1000);
        this.$http.post(this.GLOBAL.host, {
          method: "User_Code",
          data: {
            phone: this.ruleForm.phone
          }
        }).then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: res.data.data,
              type: 'success'
            });
          } else {
            this.$message({
              message: res.data.data,
              type: 'error'
            });
            me.sendMsgDisabled = false;
            me.time = 60;
            window.clearInterval(interval);
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .login-container {
    height: 100%;
    width: 100%;
    background-color: #172D40;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .login-content {
    /*height: 450px;*/
    width: 600px;
    background-color: #30495B;
  }
  .login-form {
    margin: 40px 120px;
  }
  .login-title {
    text-align: center;
    font-size: 24px;
    color: white;
    margin-top: 40px;
  }
  .extral-link {
    display: flex;
    justify-content: space-between;
    margin-top: -20px;
    padding-left: 30px;
  }
</style>
<style lang="less">
  .ruleForm > div > label {
    color: white;
  }
</style>
